<template>
	<el-container>
		<el-header>
			<Header></Header>
		</el-header>
		<el-container>
			<el-aside width="200px">
				<Aside></Aside>
			</el-aside>
			<el-main>
				<h3 style="text-align:center;">会员列表</h3>

				<el-form :inline="true" :model="search" class="demo-form-inline"
					style="width:99%;margin:0 auto;text-align:center;">
					<el-form-item label="ID">
						<el-input v-model="search.userid"></el-input>
					</el-form-item>

					<el-form-item label="账号">
						<el-input v-model="search.username"></el-input>
					</el-form-item>

					<el-form-item label="所属组">
						<el-select v-model="search.groupid">
							<el-option label="请选择" value="0"></el-option>
							<el-option v-for="item in $core_enums('member_group')" :key="item.key" :label="item.value"
								:value="item.key"></el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="真实姓名">
						<el-input v-model="search.truename"></el-input>
					</el-form-item>

					<el-form-item>
						<el-button type="primary" @click="to_search">查询</el-button>
						<el-button type="warning" @click="to_reset">重置</el-button>
					</el-form-item>
				</el-form>

				<el-table v-loading="loading" :data="rows" style="width:99%;margin:0 auto;" border>
					<el-table-column prop="userid" label="ID" width="180"></el-table-column>

					<el-table-column prop="username" label="账号" width="180">
						<template slot-scope="scope">
							<a href="javascript:void(0);"
								@click="handlePreview(scope.$index, scope.row)">{{ scope.row.username }}</a>
						</template>
					</el-table-column>

					<el-table-column prop="groupid" label="所属组"></el-table-column>

					<el-table-column prop="truename" label="真实姓名"></el-table-column>

					<el-table-column align="right">
						<template slot="header" slot-scope="scope">操作</template>
						<template slot-scope="scope">
							<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
						</template>
					</el-table-column>
				</el-table>

				<br />
				<el-pagination background :total="total" :page-size="20" :current-page.sync="search.page"
					@current-change="handleCurrentChange" style="text-align:center;"></el-pagination>
				<br />
				<br />
			</el-main>
		</el-container>
		<el-footer>
			<Footer></Footer>
		</el-footer>
	</el-container>
</template>

<script>
	export default {
		data() {
			return {
				search: {
					page: 1,
					userid: "",
					username: "",
					groupid: "0",
					truename: ""
				},
				loading: false,
				rows: [],
				total: 0
			};
		},
		async mounted() {
			this.load_data();
		},
		methods: {
			//加载数据
			load_data(cb) {
				this.loading = true;
				this.$axios
					.post("/api/member/lst", {
						page: this.search.page,
						userid: this.search.userid,
						username: this.search.username,
						groupid: this.search.groupid,
						truename: this.search.truename
					})
					.then(data => {
						this.loading = false;
						this.rows = data.data.rows;
						this.total = data.data.total;
						if (cb) {
							cb();
						}
						this.$forceUpdate();
					})
					.catch(error => {
						this.loading = false;
						this.$message.error(error.toString());
					});
			},
			//分页点击
			handleCurrentChange(page) {
				this.search.page = page;
				this.load_data();
			},
			//搜索
			to_search() {
				var c = 0;
				if (parseInt(this.search.userid) > 0) {
					c++;
				}
				if (this.search.username.length > 0) {
					c++;
				}
				if (parseInt(this.search.groupid) > 0) {
					c++;
				}
				if (this.search.truename.length > 0) {
					c++;
				}
				if (!c) {
					this.$message.error("请输入搜索条件！");
					return;
				}
				this.search.page = 1;
				this.load_data();
			},
			//重置
			to_reset() {
				this.search = {
					page: 1,
					userid: "",
					username: "",
					groupid: "0",
					truename: ""
				};
				this.load_data();
			},
			//预览
			handlePreview(index, row) {
				uni.navigateTo({
					url: `/pages/member/preview?userid=${row.userid}`
				});
			},
			//编辑
			handleEdit(index, row) {
				uni.navigateTo({
					url: `/pages/member/mod?userid=${row.userid}`
				})
			},

		}
	};
</script>

<style scoped>
	.el-header,
	.el-footer {
		background-color: #b3c0d1;
		color: #333;
		text-align: center;
		line-height: 60px;
	}

	.el-aside {
		background-color: #d3dce6;
		color: #333;
		text-align: center;
	}

	.el-main {
		
		color: #333;
	}
</style>
